<script setup>
import {onMounted, ref} from "vue";
import {resolveNodeTree} from "../utils/index.js";

defineOptions({
  name: 'AeEditorResolve'
})
const props = defineProps({
  value: {
    type: Array,
    default: () => ([])
  },
  width: {
    type: String || Number,
    default: '600px'
  },
  height: {
    type: String || Number,
    default: '400px'
  },
  customStyle: {
    type: Object,
    default: () => ({})
  }
})
const AeEditorResolveRef = ref(null)
onMounted(() => {
  if (props.value.length) {
    try {
      const nodeTree = resolveNodeTree(props.value)
      if (nodeTree.length) {
        AeEditorResolveRef.value.append(...nodeTree)
      }
    } catch (e) {
      console.error(e)
    }
  }
})
</script>

<template>
<div ref="AeEditorResolveRef"></div>
</template>

<style scoped>

</style>